<template>
  <div class="dialog">
    <el-dialog
      title="保养结果信息"
      :visible.sync="showDialog"
      width="60%"
      @close="cancel"
      top="0"
    >
      <div class="equip-select-box">
        <div class="equip-select-box-left">
          <div class="equip-select-box-left-title">设备列表</div>
          <div class="equip-select-box-left-content">
            <div
              v-for="(item,index) in equipmentList"
              :key="index"
              @click="queryDataItem(item, index)"
              class="equip-select-box-item"
              :class="{
                'is-active': activeIndex === index
              }"
            >{{ item.equipmentName }}</div>
            <!-- equipmentName equipmentList -->
          </div>
        </div>
        <div class="equip-select-box-right">
          <el-table
            ref="checkTable"
            highlight-current-row
            :data="checkList"
            stripe
            border
            height="100%"
          >
            <el-table-column prop="checkItemName" label="检查项名称" />
            <el-table-column prop="whetherResult" label="标准值">
              <template
                v-if="scoped.row.equipmentCheckItemMapperId"
                slot-scope="scoped"
              >
                <div
                  v-if="scoped.row.checkType==='NUMTYPE'"
                >{{ scoped.row.lowerLimit?'下限:'+scoped.row.lowerLimit+scoped.row.unitName:'' }}{{ scoped.row.upperLimit?'上限:'+scoped.row.upperLimit+scoped.row.unitName:'' }}</div>
                <div v-else>{{ scoped.row.standardValue||'--' }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="whetherResult" label="是否正常">
              <template slot-scope="scoped">
                <span
                  v-if="typeof scoped.row.whetherResult === 'boolean'"
                >{{ scoped.row.whetherResult ? '正常': '异常' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="checkResult" label="检查结果" />
            <el-table-column prop="checkTime" label="检查时间" />
          </el-table>
        </div>
      </div>
    </el-dialog>
    <Picture
      :title-text="titleText"
      :edit-object="editObject"
      :show.sync="showPictureDialog"
      @closeDialog="closeDialog"
      @cancelDialog="closeDialog"
    />
  </div>
</template>

<script>
import Picture from "@/components/detailDialog/picture-dialog.vue";
import maintenanceTaskApi from "@/api/equip-maintenance-manage/maintenance-task";

export default {
  components: { Picture },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    taskId: {
      type: Number,
      default: "",
    },
  },
  data() {
    return {
      titleText: "点检结果图片",
      editObject: {},
      activeIndex: 0,
      // 查看图片
      showPictureDialog: false,
      loading: false,
      formData: {},
      checkList: [],
      equipmentList: [],
      showDialog: this.show,
      // 表单展示项
      tableLabel: [
        {
          label: "检查项名称",
          param: "checkItemName",
          show: true,
          notSearch: true,
        },
        {
          label: "是否正常",
          param: "equipmentName",
          show: true,
          notSearch: true,
        },
        {
          label: "结果说明",
          param: "dataItemName",
          show: true,
          notSearch: true,
        },
        {
          label: "图片",
          param: "picture",
          show: true,
          slotName: "picture",
          notSearch: true,
        },
      ],
    };
  },
  created() {
    // this.queryDataList();
  },
  watch: {
    show(v) {
      this.showDialog = v;
      if (v) {
        this.queryPageList();
      }
    },
  },
  methods: {
    queryDataItem(item, index) {
      this.activeIndex = index;
      this.checkList = item.taskCheckItemMapperList;
    },
    closeDialog() {
      this.showPictureDialog = false;
    },
    // 查看详情
    queryDetail(row) {
      this.titleText = "";
      this.editObject = row;
      this.showShowDetailDialog = true;
    },
    queryPageList(e) {
      this.loading = true;
      maintenanceTaskApi.query({ taskId: this.taskId }).then((res) => {
        this.loading = false;
        if (res.code === 0) {
          this.$message.error("查询失败");
        }
        this.equipmentList = res.data.taskEquipmentMapperList;
        this.checkList =
          res.data.taskEquipmentMapperList[0]?.taskCheckItemMapperList;
      });
    },
    cancel() {
      this.$emit("cancelDialog");
    },
  },
};
</script>
<style scoped lang="scss">
.equip-select-box {
  display: flex;
  width: 100%;
  // min-height: 300px;
  height: 100%;
  padding: 0px 20px 0px 10px;
  .equip-select-box-left {
    min-width: 160px;
    flex: 1;
    // background-color: #c0dbe1;
    padding: 10px;
    margin-right: 10px;
    color: #000;
    .equip-select-box-left-title {
      padding: 0 0 10px 0;
      font-size: 17px;
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
      // border-bottom: 1px dashed #e2e2e2;
      text-align: center;
      width: 100%;
    }
    .equip-select-box-left-content {
      padding: 10px 10px 0;
      // max-height: 300px;
      box-sizing: border-box;
      overflow-y: auto;
      overflow-x: hidden;
      background: #dfe2e8;
      border: 1px solid #becfd9;
      height: 96%;
      .equip-select-box-item {
        background: #fff;
        padding: 10px;
        font-size: 18px;
        margin-bottom: 10px;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
        &:hover {
          background: #006e91;
          color: #fff;
        }
      }
      .is-active {
        background: #006e91;
        color: #fff;
      }
    }
  }
  .equip-select-box-right {
    flex: 3.5;
  }
}
::v-deep {
  .el-dialog {
    min-height: 75vh;
    .el-dialog__body {
      height: 72vh;
    }
  }

  // el-table样式
  .el-table {
    background-color: transparent;
    color: #000;

    &::before {
      background-color: transparent;
    }

    &::after {
      width: 0;
    }
  }

  // 解决行无法铺满整个表格
  .el-table__body {
    height: 100%;
  }

  .el-table--border {
    border: 1px solid #becfd9;
  }

  .el-table__empty-text {
    color: #000;
    font-size: 18px;
  }

  .el-table .el-table-column--selection > .cell {
    white-space: nowrap;
  }

  .el-table th {
    background-color: #dfe2e8;
  }

  .el-table th > .cell {
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
  }

  .el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: normal;
    padding-right: 10px;
    font-size: 14px;
  }

  .el-table tr,
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: transparent;
  }

  // 解决竖线对不齐
  .el-table th.gutter {
    display: table-cell !important;
  }

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    // border-left: 0;
    // margin-top: -0.5px;
    border-color: #becfd9;
    //    & {
    //   border-top-width: 0 !important;
    //   border-right-width: 0 !important;
    // }
  }

  .el-table-column--selection {
    border-left: 1px solid #becfd9 !important;
  }

  .el-table .el-table__row--striped {
    background-color: #becfd9;
  }

  .el-table thead {
    color: #000;
    font-weight: bold;
  }

  .el-table td,
  .el-table th {
    text-align: center;
    height: 37px;
  }

  // 表格hover及选中样式
  .el-table tr:hover,
  .el-table--enable-row-hover .el-table__body tr:hover > td,
  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
  .el-table__body tr.current-row > td {
    background-color: #becfd9;
  }
  .el-table__body {
    height: auto;
  }
}
</style>
